<template>
        <div class="docim">
            <div :class="{'short':this.isActive}">
            <el-checkbox v-model="checked" style="float: right;margin-right: 5px;margin-bottom: 5px">显示全部</el-checkbox>
            <div class="docum-tille">
                <!-- 标题: -->
                <div>{{ info.title }}</div>
                <div>
                    <p>拟稿人 ： {{ info.alias }}<span v-if="info.dept">【{{ info.dept }}】</span>  {{ info.phone }}</p>
                </div>
            </div>
            <div class="docum-cl"
                    v-for="(item, index) of flowlogsList"
                    :key="index">
                <template v-if="checked||item.suggestion">
                <div class="avatar">
                    <el-avatar :size="40" :src="getAvatarUrl(item)"  v-if="checked||item.suggestion">
                        <img src="@/assets/images/logo.png"/>
                    </el-avatar>
                </div>
                <div class="info">
                    <div style="display: flex;flex-wrap:wrap;">
                        <p>
                            {{ item.participant_info.participant_alias}} {{ item.state.state_name}}
                        </p>
                        <p><i class="el-icon-time"></i>
                            {{ item.gmt_modified }} {{ item.transition.transition_name }}</p>
                    </div>
                    <div class="info-content" v-if="item.suggestion">
                        <div v-if="item.suggestion">{{ item.suggestion}} </div>
                        <div class="bar" v-if="enable||showEdit(item)">
                          <span  style="float: right;">
                            <detail-button @click="quote(item)" v-if="enable"><i class="el-icon-edit-outline"></i> 引用</detail-button>
                            <my-button handle="editsugg" v-if="showEdit(item)" @click="toEdit(item)"><i class="el-icon-edit"></i>编辑</my-button>
                          </span>
                        </div>
                    </div>
                </div>
                </template>
                <template v-else>
                    <div style="display: flex;flex-wrap:wrap; text-align: center; width: 100%;margin-left: 51px; font-size: 12px" :class="{'center':isAll}">
                        <p>
                            {{ item.participant_info.participant_alias}} {{ item.state.state_name}}
                        </p>
                        <p><i class="el-icon-time"></i>
                            {{ item.gmt_modified }} {{ item.transition.transition_name }}</p>
                    </div>
                </template>
            </div>
                <div class="participant" v-if="row.participant">{{row.participant}} 正在处理</div>
            </div>
            <suggestion-dialog ref="active-dialog" :row="row"></suggestion-dialog>
            <edit-dialog :visible.sync="visible" v-if="visible" :row="currRow" @reloadList="getFlowlogs" :showCode="showShouquan(currRow)"></edit-dialog>
        </div>
</template>
<script>
    import workManagement from "@/api/workManagement/index";
    import eventBus from "@/utils/eventBus";
    import common from "@/api/common/index";
    import { mapGetters, mapState } from 'vuex'
    import SuggestionDialog from "./SuggestionDialog";
    import EditDialog from "@/components/WorkFlowsDialog/DocumentCase/EditDialog";
   export default {
       components:{EditDialog, SuggestionDialog},
       props:{
           row:{
               type:Object,
               default:function () {
                    return {}
               }
           },
           isAll:{
               type:Boolean,
               default: false
           },
           chuanyue:{
               type:Boolean,
               default: false
           },
           showActiveBtn:{
               type:Boolean,
               default: false
           }
       },
      watch:{
      },
       computed:{
         ...mapState(['suggestion']),
         isActive(){
           return this.suggestion.isActive
         },
         phone(){
             return this.row.phone
         },
         enable(){
           return this.suggestion.enable
         },
       },
       data() {
           return {
               flowlogsList: [],
               info:{},
               currRow:{},
               visible:false,
               checked:this.isAll,
           };
       },
       created() {
           this.getFlowlogs();
           this.refreshData();
       },
     mounted() {
     },
       methods: {
           quote(item){
               this.$store.dispatch("suggestion/setSuggestion", item.suggestion);
               this.msgSuccess("引用成功！")
           },
           showEdit(row){
               return row.participant_info.is_edit
           },
           showShouquan(row){
               return row.participant_info.is_sms
           },
           toEdit(row){
               this.currRow = row
               this.visible=true
           },
           getAvatarUrl(item){
                return item?item.participant_info.participant_avatar:require("@/assets/images/logo.png")
           },
           refreshData() {
               eventBus.$on("submitWork", () => {
                   this.getFlowlogs();
               });
           },
           getFlowlogs() {
               if(this.row.ticket){
                   workManagement.getFlowlogs(this.row.ticket,{ per_page:100,page: 1}).then(res => {
                       this.flowlogsList = res.data.value;
                       this.info = res.data
                   });
               }else if(this.chuanyue){
                 common.getDocumentDistFlowLogs({document:this.row.id}).then(res=>{
                       this.flowlogsList = res.data.list;
                       this.info = res.data
                   })
               }
           }
       },
   };
</script>
<style lang="scss" scoped>
    .participant{
        text-align: center;
        padding: 5px;
        color: #de4c4a;
    }
    .short{
        height:calc(96vh - 410px); overflow-y: scroll
    }
    .center{
        justify-content: center;
    }
    .docum-tille {
        > div:nth-child(1) {
            font-size: 20px;
            font-weight: 900;
            color: #333;
            margin-bottom: 10px;
        }
        > div:nth-child(2) {
            display: flex;
            > p {
                padding-right: 20px;
                margin-bottom: 10px;
            }
        }
    }
    .docum-cl {
        padding: 5px 0;
        margin-left: 40px;
        border-left: 2px solid #d0d0d0;
        display: flex;

        >.info{
            width: 80%;
            margin-left: 30px;
            > div:nth-child(1) {
                color: #666;
                font-size: 12px;
                p {
                    margin-top: 7px;
                }
            }

            .info-content{
                margin-top: 10px;
                border: 1px solid #d2d2d2;
                border-radius: 7px;
                margin-bottom: 20px;
                width: 100%;
                background-color: #e0e0e03b;
                .bar{
                    line-height: 30px;
                    padding: 0 12px;
                    min-height: 30px;
                    > span {
                        float: right;
                    }
                }
                > div {
                    padding: 15px;
                }
            }
        }
        > .avatar {
            margin-left: -22.5px;
            width: 45px;
            height: 45px;
            border-radius: 50%;
            border: 2px solid #fff;

            text-align: center;
            overflow: hidden;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }

    </style>
